<!-- 风险类型 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">风险类型</span>
      </div>
      <div class="box">
        <div id="riskTypeChart" style="width: 100%;height:350px"></div>
        <p>风险数量：<span>48</span></p>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined
    }
  },
  props: {
    tabNum: {
      type: String,
      default: '0'
    }
  },
  watch: {
    tabNum() {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('riskTypeChart')
      this.chart = echarts.init(ctx)

      const datas = [
        {
          name: '设计风险',
          value: 12
        },
        {
          name: '人事风险',
          value: 22
        },
        {
          name: '成本风险',
          value: 33
        },
        {
          name: '质量风险',
          value: 19
        }
      ]
      
      let option = {
        color: ['green', '#9bd08c', '#abd79e', 'lightgreen'],
        legend: {
          itemHeight: 14,
          itemWidth: 14,
          icon: 'rect',
          orient: 'vertical',
          top: 'center',
          right: '5%',
          textStyle: {
            align: 'left',
            color: '#',
            verticalAlign: 'middle',
            rich: {
              name: {
                width: 100,
                fontSize: 14
              },
              value: {
                width: 20,
                align: 'right',
                fontFamily: 'Medium',
                fontSize: 14
              },
              rate: {
                width: 10,
                align: 'right',
                fontSize: 14
              }
            }
          },
          data: datas,
          formatter: (name) => {
            if (datas.length) {
              const item = datas.filter((item) => item.name === name)[0]
              return `{name|${name}}{value| ${item.value}} {rate| 个}`
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{d}%'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['35%', '50%'],
            roseType: 'radius',
            label: {
              formatter: '{d}%'
            },
            labelLine: {
              length: 1,
              length2: 20
            },
            data: datas
          }
        ]
      }
      
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  position: relative;
  p {
    position: absolute;
    top: 0;
    right: 20px;
    span {
      font-size: 18px;
      color: green;
      font-weight: 900;
    }
  }
}
</style>